<template>
  <div class="pagecontent">
    <div class="commonheader">
      <i class="iconback"
         @click="backClick"></i>
      <h3>选择品牌</h3>
    </div>
    <!-- <div class="muibottom">
      <a class="u-button reset">重置</a><a class="u-button sure"
         @click="sureClick">确定</a>
    </div> -->
    <div class="muicontent">
      <!-- <div class="brandpanel">
        <h3 class="title">热门</h3>
        <div class="panelbox">
          <ul class="brandtype">
            <router-link :to="{path:'/filterCondition'}" tag="li">
              <div class="brandimg"><img src="../../../static/images/upload/pic01.png"/></div>
              <p class="brandname">Acne Stuios 艾克妮</p>
            </router-link>
            <li>
              <div class="brandimg"><img src="../../../static/images/upload/pic02.png"/></div>
              <p class="brandname">Alfred Dunhil 登喜路</p>
            </li>
            <li>
              <div class="brandimg"><img src="../../../static/images/upload/pic03.png"/></div>
              <p class="brandname">American Eagle</p>
            </li>
            <li>
              <div class="brandimg"><img src="../../../static/images/upload/pic04.png"/></div>
              <p class="brandname">Burberry 博柏利</p>
            </li>
            <li>
              <div class="brandimg"><img src="../../../static/images/upload/pic05.png"/></div>
              <p class="brandname">Aape</p>
            </li>
            <li>
              <div class="brandimg"><img src="../../../static/images/upload/pic06.png"/></div>
              <p class="brandname">Adidas 阿迪达斯</p>
            </li>
          </ul>
        </div>
      </div> -->
      <!-- <div class="brandpanel">
        <h3 class="title">A</h3>
        <div class="panelbox">
          <ul class="brandlist">
            <li>Chloe 蔻依</li>
            <li>Christian Dior 克里斯汀·迪奥</li>
            <li>Chanel 香奈儿</li>
          </ul>
        </div>
      </div> -->
      <mt-index-list>
        <mt-index-section v-for="(hotitem,hotindex) in hotdata"
                          :key="hotindex-1"
                          :index="hotitem.hottitle"
                          class="hotlist">
          <mt-cell v-for="(childhotitem,childhotindex) in hotitem.hotlist"
                   :key="childhotindex+1000"
                   class="brandtypebox">
            <div @click="hotItemClick(childhotitem.key_id,childhotitem.brandEName)">
              <div class="bimg"><img :src="childhotitem.brandimg"></div>
              <p class="bname">{{childhotitem.brandName}}<br>{{childhotitem.brandEName}}</p>
            </div>
          </mt-cell>
        </mt-index-section>
        <mt-index-section v-for="(item,index) in brandList"
                          :key="index"
                          :index="item.kind">
          <mt-cell v-for="(i,indexList) in item.brandobjList"
                   :key="indexList"
                   :title="i.brandEName!==i.brandName?i.brandEName + ' '+ i.brandName:i.brandName"
                   @click.native="itemClick(i.key_id,i.brandEName)">
          </mt-cell>
        </mt-index-section>

      </mt-index-list>
    </div>
  </div>
</template>

<script>
export default {
  name: 'brandChose',
  data () {
    return {
      hotdata: [{
        'hottitle': '热门',
        'hotlist': [
          {
            'key_id': 1,
            'brandEName': 'Gucci',
            'brandName': '古驰',
            'brandimg': '../../../static/images/upload/gucci.png'
          },
          {
            'key_id': 2,
            'brandEName': 'LV',
            'brandName': '路易威登',
            'brandimg': '../../../static/images/upload/lv.png'
          },
          {
            'key_id': 3,
            'brandEName': 'Chanel',
            'brandName': '香奈儿',
            'brandimg': '../../../static/images/upload/chanel.png'
          },
          {
            'key_id': 4,
            'brandEName': 'BV',
            'brandName': '葆蝶家',
            'brandimg': '../../../static/images/upload/bv.png'
          },
          {
            'key_id': 5,
            'brandEName': 'celine',
            'brandName': '赛琳',
            'brandimg': '../../../static/images/upload/celine.png'
          },
          {
            'key_id': 6,
            'brandEName': 'Hermes',
            'brandName': '爱马仕',
            'brandimg': '../../../static/images/upload/hermes.png'
          },
          {
            'key_id': 7,
            'brandEName': 'Dior',
            'brandName': '迪奥',
            'brandimg': '../../../static/images/upload/dior.png'
          },
          {
            'key_id': 8,
            'brandEName': 'PRADA',
            'brandName': '普拉达',
            'brandimg': '../../../static/images/upload/prada.png'
          }
        ]
      }],
      city: [
        // {
        //   'title': '热',
        //   'lists': this.hotdata
        // },
        {
          'title': 'A',
          'lists': [
            '阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'
          ]
        },
        {
          'title': 'B',
          'lists': ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州'
          ]
        },
        {
          'title': 'C',
          'lists': ['重庆', '成都', '长沙', '长春', '沧州', '常德', '昌都', '长治', '常州', '巢湖', '潮州', '承德', '郴州', '赤峰', '池州', '崇左', '楚雄', '滁州', '朝阳'
          ]
        },
        {
          'title': 'D',
          'lists': ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营'
          ]
        },
        {
          'title': 'E',
          'lists': ['鄂尔多斯', '恩施', '鄂州']
        },
        {
          'title': 'F',
          'lists': ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'
          ]

        },
        {
          'title': 'G',
          'lists': ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']

        },
        {
          'title': 'H',
          'lists': ['杭州', '哈尔滨', '合肥', '海口', '呼和浩特', '海北', '海东', '海南', '海西', '邯郸', '汉中', '鹤壁', '河池', '鹤岗', '黑河', '衡水', '衡阳', '河源', '贺州', '红河', '淮安', '淮北', '怀化', '淮南', '黄冈', '黄南', '黄山', '黄石', '惠州', '葫芦岛', '呼伦贝尔', '湖州', '菏泽'
          ]
        },
        {
          'title': 'J',
          'lists': ['济南', '佳木斯', '吉安', '江门', '焦作', '嘉兴', '嘉峪关', '揭阳', '吉林', '金昌', '晋城', '景德镇', '荆门', '荆州', '金华', '济宁', '晋中', '锦州', '九江',
            '酒泉'
          ]

        },
        {
          'title': 'K',
          'lists': ['昆明', '开封']

        },
        {
          'title': 'L',
          'lists': ['兰州', '拉萨', '来宾', '莱芜', '廊坊', '乐山', '凉山', '连云港', '聊城', '辽阳', '辽源', '丽江', '临沧', '临汾', '临夏', '临沂', '林芝', '丽水', '六安', '六盘水',
            '柳州', '陇南', '龙岩', '娄底', '漯河', '洛阳', '泸州', '吕梁'
          ]

        },
        {
          'title': 'M',
          'lists': ['马鞍山', '茂名', '眉山', '梅州', '绵阳', '牡丹江']

        },
        {
          'title': 'N',
          'lists': ['南京', '南昌', '南宁', '宁波', '南充', '南平', '南通', '南阳', '那曲', '内江', '宁德', '怒江'
          ]
        },
        {
          'title': 'P',
          'lists': ['盘锦', '攀枝花', '平顶山', '平凉', '萍乡', '莆田', '濮阳']

        },
        {
          'title': 'Q',
          'lists': ['青岛', '黔东南', '黔南', '黔西南', '庆阳', '清远', '秦皇岛', '钦州', '齐齐哈尔', '泉州', '曲靖', '衢州']

        },
        {
          'title': 'R',
          'lists': ['日喀则', '日照']
        },
        {
          'title': 'S',
          'lists': ['上海', '深圳', '苏州', '沈阳', '石家庄', '三门峡', '三明', '三亚', '商洛', '商丘', '上饶', '山南', '汕头', '汕尾', '韶关', '绍兴', '邵阳', '十堰', '朔州', '四平', '绥化', '遂宁', '随州', '宿迁', '宿州'
          ]

        },
        {
          'title': 'T',
          'lists': ['天津', '太原', '泰安', '泰州', '台州', '唐山', '天水', '铁岭', '铜川', '通化', '通辽', '铜陵', '铜仁', '台湾', 'W', '武汉', '乌鲁木齐', '无锡', '威海', '潍坊', '文山', '温州', '乌海', '芜湖', '乌兰察布', '武威', '梧州'
          ]
        },
        {
          'title': 'X',
          'lists': ['厦门', '西安', '西宁', '襄樊', '湘潭', '湘西', '咸宁', '咸阳', '孝感', '邢台', '新乡', '信阳', '新余', '忻州', '西双版纳', '宣城', '许昌', '徐州', '香港', '锡林郭勒', '兴安'
          ]

        },
        {
          'title': 'Y',
          'lists': ['银川', '雅安', '延安', '延边', '盐城', '阳江', '阳泉', '扬州', '烟台', '宜宾', '宜昌', '宜春', '营口', '益阳', '永州', '岳阳', '榆林', '运城', '云浮', '玉树', '玉溪', '玉林'
          ]

        },
        {
          'title': 'Z',
          'lists': ['杂多县', '赞皇县', '枣强县', '枣阳市', '枣庄', '泽库县', '增城市', '曾都区', '泽普县', '泽州县', '札达县', '扎赉特旗', '扎兰屯市', '扎鲁特旗', '扎囊县', '张北县', '张店区', '章贡区', '张家港', '张家界', '张家口', '漳平市', '漳浦县', '章丘市', '樟树市', '张湾区', '彰武县', '漳县', '张掖', '漳州', '长子县', '湛河区', '湛江', '站前区', '沾益县', '诏安县', '召陵区', '昭平县', '肇庆', '昭通', '赵县', '昭阳区', '招远市', '肇源县', '肇州县', '柞水县', '柘城县', '浙江', '镇安县', '振安区', '镇巴县', '正安县', '正定县', '正定新区', '正蓝旗', '正宁县', '蒸湘区', '正镶白旗', '正阳县', '郑州', '镇海区', '镇江', '浈江区', '镇康县', '镇赉县', '镇平县', '振兴区', '镇雄县', '镇原县', '志丹县', '治多县', '芝罘区', '枝江市', '芷江侗族自治县', '织金县', '中方县', '中江县', '钟楼区', '中牟县', '中宁县', '中山', '中山区', '钟山区', '钟山县', '中卫', '钟祥市', '中阳县', '中原区', '周村区', '周口', '周宁县', '舟曲县', '舟山', '周至县', '庄河市', '诸城市', '珠海', '珠晖区', '诸暨市', '驻马店', '准格尔旗', '涿鹿县', '卓尼', '涿州市', '卓资县', '珠山区', '竹山县', '竹溪县', '株洲', '株洲县', '淄博', '子长县', '淄川区', '自贡', '秭归县', '紫金县', '自流井区', '资溪县', '资兴市', '资阳'
          ]
        }
      ],
      brandList: [],
      letter: []
    }
  },
  methods: {
    sureClick () {
      this.$router.push({ path: '/filterCondition' })
    },
    backClick () {
      this.$router.go(-1)
    },
    itemClick (keyid, brandname) {
      this.$store.commit('goodsBrandFun', brandname)
      this.$store.commit('setBrandId', keyid)
      this.$router.push({
        name: 'filterCondition',
        query: { keyId: keyid }
      })
    },
    hotItemClick (keyid, brandname) {
      this.$store.commit('goodsBrandFun', brandname)
      this.$store.commit('setBrandId', keyid)
      this.$router.push({
        name: 'filterCondition',
        query: { keyId: keyid }
      })
    }
  },
  mounted () {
    window.localStorage.setItem('id', this.$route.query.id)

    this.$http.get(`${this.baseUrl.brandFindAll}`).then((res) => {
      if (res.data.code === 200) {
        console.log(res.data.data)
        let array = [] // 保存字母
        for (let i = 0; i < res.data.data.length; i++) {
          array.push(res.data.data[i].kind)
        }
        this.letter = Array.from(new Set(array)) // 字母去重，保存到letter数组中
        // console.log(this.letter)
        console.log(this.brandList.length)

        for (let j = 0; j < this.letter.length; j++) {
          let brandobj
          let brandAll = []
          var brandobjList = [] // 保存字母相同的品牌
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].kind === this.letter[j]) {
              brandobjList.push(res.data.data[i])
            }
          }
          // console.log(brandobjList)
          brandAll[j] = brandobjList
          console.log(brandAll[j])
          brandobj = {
            kind: this.letter[j],
            brandobjList: brandAll[j]
          }
          this.brandList.push(brandobj)
        }
        console.log(this.brandList)
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  position absolute
  bottom 1rem
  top 0.9rem
.brandpanel
  .title
    font-size 0.32rem
    line-height 0.7rem
    padding-left 0.3rem
    background #f6f5f5
    position relative
    &:before
      content ''
      width 0.04rem
      height 0.22rem
      background #d21733
      position absolute
      left 0
      top 50%
      margin-top -0.11rem
  .panelbox
    .brandtype
      list-style none
      clear both
      overflow hidden
      width 100%
      padding 0.26rem 0
      li
        width 33.333%
        float left
        text-align center
        .brandimg
          width 1.6rem
          height 1.6rem
          font-size 0
          line-height 1.6rem
          vertical-align middle
          margin 0 auto
          img
            max-width 100%
            max-height 100%
            display block
        .brandname
          font-size 0.28rem
          color #666
          padding 0.1rem 0.36rem
          line-height 1.3
    .brandlist
      li
        list-style none
        font-size 0.28rem
        color #666
        line-height 0.85rem
        padding-left 0.3rem
.muibottom
  height 1rem
  position fixed
  left 0
  right 0
  bottom 0
  z-index 10
  .u-button
    display inline-block
    width 50%
    text-align center
    line-height 1rem
    font-size 0.32rem
    box-sizing border-box
    background #fff
  .reset
    color #666
    border-top 2px solid #f6f5f5
  .sure
    color #fff
    background #d21733
    border-top 2px solid #d21733
.brandtypebox
  width 25%
  float left
  margin-bottom 0.3rem
  .bimg
    font-size 0
    height 1.4rem
    line-height 1.4rem
    vertical-align middle
    margin 0 auto 0.1rem auto
    text-align center
    img
      max-width 100%
      max-height 100%
      display inline-block
  .bname
    display block
    font-size 0.28rem
    color #666
    // padding: 0.1rem 0;
    line-height 1.3
    text-align center
    height 0.72rem
.brandtypebox>>>.mint-cell-value
  display block
</style>
